<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 200px;height: 100px;line-height: 100px;text-align: center;border: solid 1px black;margin: 0 auto;font-size: 50px;}
    .btn{width: 200px;height: 50px;margin: 10px auto;display: block;font-size: 30px;}
  </style>
</head>
<body>
  <div class="box">10</div>
  <input type="button" value="开始" class="btn">
</body>
<script>
  var btn = document.querySelector(".btn");
  var box = document.querySelector(".box");

  var num = box.innerText - 0;
  var startNum = box.innerText - 0;
  // 0表示停止状态，1表示正在倒计时状态，2表示到终点的状态
  var state = 0;
  var t;
  btn.onclick = function(){
    // 判断当前状态是否是停止
    if(state === 0){
      // 如果是停止，那就开始倒计时
      if( t ) return;
      t = setInterval(function(){
        if(num <= 1){
          clearInterval(t);
          box.innerText = "结束了";
          // 倒计时结束后，将状态设置为终点状态
          state = 2;
          btn.value = "复位";
          t = null;
        }else{
          num--;
          box.innerText = num;
        }
      }, 1000)
      // 开始之后，将状态设置为开始
      state = 1;
      btn.value = "暂停";
    }else
    // 判断当前状态是否是开始
    if(state === 1){
      // 如果是开始，那就停止（暂停）倒计时
      clearInterval(t);
      t = null;
      // 暂停之后，将状态设置为停止（暂停）
      state = 0;
      btn.value = "继续";
    }else
    // 判断当前状态是否是复位
    if(state === 2){
      // 如果是复位，那就将所有内容设置为初始值
      box.innerText = startNum;
      num = startNum;
      // 复位之后，将状态设置为停止
      state = 0;
      btn.value = "开始";
    }
  }
</script>
</html>